package app.itgungnir.compose.wan.business.main.square

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import app.itgungnir.compose.wan.widgets.WanAvatar
import app.itgungnir.compose.wan.widgets.WanInfo
import app.itgungnir.compose.wan.widgets.WanTitle

@Composable
fun SquareItemUI(item: Square, onAuthorClick: (Square) -> Unit = {}, onArticleClick: (Square) -> Unit = {}) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp, end = 10.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 25.dp)
                .clip(RoundedCornerShape(12.dp))
                .background(MaterialTheme.colors.background)
                .clickable { onArticleClick.invoke(item) }
                .padding(start = 10.dp, end = 10.dp, top = 35.dp, bottom = 5.dp)
        ) {
            WanTitle(content = item.title)
            Spacer(modifier = Modifier.height(5.dp))
            WanInfo(modifier = Modifier.align(Alignment.End), content = item.niceShareDate)
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(52.dp)
                .padding(horizontal = 25.dp)
                .clip(shape = RoundedCornerShape(25.dp))
                .background(color = MaterialTheme.colors.background)
                .border(width = 1.dp, color = MaterialTheme.colors.surface, shape = RoundedCornerShape(25.dp))
                .clickable { onAuthorClick.invoke(item) }
                .padding(start = 1.dp, end = 15.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            WanAvatar(modifier = Modifier.size(50.dp), userId = item.userId)
            Spacer(modifier = Modifier.width(5.dp))
            Column {
                WanInfo(content = item.shareUser)
                WanInfo(content = "id: ${item.userId}")
            }
        }
    }
}
